<template>
  <div class="dashboard-container">
    <div>
      <el-card class="box-card">
        <!-- 测试页, 这是主页面 -->
        <!-- {{ dddd }} -->
        <div id="index">
          <h3 style="width:61%;float:left">标题1</h3>
          <h3 style="float:left">标题2</h3>
          <div id="pic1" />
          <div id="pic2" />
          <h3 style="width:50%;float:left">标题3</h3>
          <h3 style="float:left">标题4</h3>
          <div id="pic3" />
          <div id="pic4" />
        </div>
        <!-- {{ userinfo }} -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
var echarts = require('echarts')

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      dddd: '12312312312',
      userinfo: {}
    }
  },
  computed: {},
  created() {
    this.dddd = parseTime(new Date(), '{y}-{m}')
  },
  mounted() {
    // 初始化
    this.PicInit()
  },
  methods: {
    PicInit() {
      this.PicInit_1()
      this.PicInit_2()
      this.PicInit_3()
      this.PicInit_4()
    },
    PicInit_1() {
      var p1 = echarts.init(document.getElementById('pic1'))
      var base = +new Date(2019, 9, 3)
      var oneDay = 24 * 3600 * 1000
      var date = []

      var data = [Math.random() * 300]

      for (var i = 1; i < 100; i++) {
        var now = new Date((base += oneDay))
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        )
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      }

      var option = {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        // title: {
        //   // left: 'center',
        //   text: '标题1'
        // },
        // 图片工具
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        // 滑动动态数据
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 10
        //   },
        //   {
        //     start: 0,
        //     end: 10,
        //     handleIcon:
        //       'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        //     handleSize: '80%',
        //     handleStyle: {
        //       color: '#fff',
        //       shadowBlur: 3,
        //       shadowColor: 'rgba(0, 0, 0, 0.6)',
        //       shadowOffsetX: 2,
        //       shadowOffsetY: 2
        //     }
        //   }
        // ],
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(149, 212, 255)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(162, 217, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                  // color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      }
      p1.setOption(option)
    },
    PicInit_2() {
      var p2 = echarts.init(document.getElementById('pic2'))
      var option = {
        // title: {
        //   text: '标题2'
        // },
        tooltip: {
          // 提示框，可以在全局也可以在
          trigger: 'item', // 提示框的样式
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          color: '#000', // 提示框的背景色
          textStyle: {
            // 提示的字体样式
            color: 'white'
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '职联科',
            textAlign: 'center',
            fill: '#F5A7C1',
            width: 30,
            height: 30,
            fontSize: 20,
            fontWeight: 900
          }
        },
        legend: {
          // 图例
          orient: 'vertical', // 图例的布局，竖直    horizontal为水平
          x: 'right', // 图例显示在右边
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          textStyle: {
            // 图例文字的样式
            color: '#333', // 文字颜色
            fontSize: 12 // 文字大小
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie', // 环形图的type和饼图相同
            radius: ['50%', '70%'], // 饼图的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: ['#D1FBEF', '#F9D858', '#4CD0DD', '#DF86F0', '#F5A7C1'],
            label: {
              normal: {
                // 正常的样式
                show: true,
                position: 'left'
              },
              emphasis: {
                // 选中时候的样式
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            }, // 提示文字
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      }
      p2.setOption(option)
    },
    PicInit_3() {
      // 基于准备好的dom，初始化echarts实例
      var q3 = echarts.init(document.getElementById('pic3'))
      // 绘制图表
      var dataAxis = [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        ''
      ]
      var data = [
        220,
        182,
        191,
        234,
        290,
        330,
        310,
        123,
        442,
        321,
        90,
        149,
        210,
        122,
        133,
        334,
        198,
        123,
        125,
        220
      ]
      var yMax = 500
      var dataShadow = []

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
      }

      var option = {
        // title: {
        //   text: '标题3'
        // },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            // For shadow
            type: 'bar',
            itemStyle: {
              normal: { color: 'rgba(0,0,0,0.05)' }
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: data
          }
        ]
      }

      // Enable data zoom when user click bar.
      var zoomSize = 6
      q3.on('click', function(params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        })
      })
      q3.setOption(option)
    },
    PicInit_4() {
      var p4 = echarts.init(document.getElementById('pic4'))
      var p1 = echarts.init(document.getElementById('pic1'))
      var base = +new Date(2019, 9, 3)
      var oneDay = 24 * 3600 * 1000
      var date = []
      var data = [Math.random() * 300]
      for (var i = 1; i < 100; i++) {
        var now = new Date((base += oneDay))
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        )
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      }

      var option = {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        // title: {
        //   // left: 'center',
        //   text: '标题4'
        // },
        // 图表下载工具
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        // 动态数据滑动条
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 10
        //   },
        //   {
        //     start: 0,
        //     end: 10,
        //     handleIcon:
        //       'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        //     handleSize: '80%',
        //     handleStyle: {
        //       color: '#fff',
        //       shadowBlur: 3,
        //       shadowColor: 'rgba(0, 0, 0, 0.6)',
        //       shadowOffsetX: 2,
        //       shadowOffsetY: 2
        //     }
        //   }
        // ],
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 131)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                }
              ])
            },
            data: data
          }
        ]
      }
      p4.setOption(option)
    }
  }
}
</script>
<style>
#pic1 {
  width: 60%;
  height: 350px;
  /* margin-top: 1%; */
  margin-bottom: 10px;
  padding: 1px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}

#pic2 {
  width: 37%;
  height: 350px;
  margin-left: 1%;
  margin-bottom: 10px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}

#pic3 {
  width: 47%;
  height: 350px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}

#pic4 {
  width: 50%;
  height: 350px;
  float: right;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}
</style>
